import { useState, useEffect } from "react";
import { VolumeO } from "@react-vant/icons";
import { Sticky } from "react-vant";
import "@/css/Text_Carousel.less";

const TextLoop = ({ activityList }:  any ) => {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      // 监听页面滚动高度，当滚动时设置透明状态
      setIsScrolled(window.scrollY > 0);
    };

    console.log('wfabwa',activityList);
    
  
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  if (!activityList) return null; // 如果没有传递数据，返回null或者显示加载中

  return (
    <div>
      <Sticky>
        <div className={`text-box ${isScrolled ? "scrolled" : ""}`}>
          <div className="scrolling-text">
            <VolumeO className="icon" />
            <span style={{ marginLeft: "10px" }}>
              {activityList?.announcement}
            </span>
          </div>
        </div>
      </Sticky>
    </div>
  );
};

export default TextLoop;
